<template>
  <div class="bg"></div>
  <div class="head">
    <p>订单已完成 <i class="fa fa-angle-right " aria-hidden="true" /></p>
  </div>
  <div class="detail">
    <!-- 更多操作 -->
    <el-card class="card-more card" shadow="never">
      感谢您对饿了么外卖的信任，期待再次光临。
      <el-divider style="margin: 3% auto;" />
      <el-row justify="center">
        <div><i class="fa fa-yen fa-2x" aria-hidden="true" /><br>
          <p>打赏骑手</p>
        </div>
        <div><i class="fa fa-cart-plus fa-2x" aria-hidden="true" /><br>
          <p>再来一单</p>
        </div>
        <div><i class="fa fa-commenting-o fa-2x" aria-hidden="true" /><br>
          <p>联系商家</p>
        </div>
        <div><i class="fa fa-volume-control-phone fa-2x" aria-hidden="true" /><br>
          <p>联系骑手</p>
        </div>
      </el-row>
    </el-card>
    <!-- 商家及购买商品 -->
    <el-card class="card">
      <!-- 店名 -->
      <div>
        <span style="font-weight: bold;font-size: 16px;">
          {{ order.storeName }} <i class="fa fa-angle-right" aria-hidden="true" />
        </span>
      </div>
      <el-divider style="margin: 3% auto;" />
      <!-- 购买商品 -->
      <div v-for="(food, index) in order.foods" :key="index">
        <el-row :gutter="3" style="margin: 2vw auto;">
          <el-col :xs="4">
            <img :src="food.img" style="width:50px;">
          </el-col>
          <el-col :xs="1"></el-col>
          <el-col :xs="4">
            <el-row>
              <el-col style="font-size:small;width:100%;">
                {{ food.name }}
              </el-col>
              <el-col style="font-weight: 100;font-size:small;  margin-top: 3vw;">
                x{{ food.number }}
              </el-col>
            </el-row>
          </el-col>
          <el-col :xs="11">
          </el-col>
          <el-col :xs="4">
            <i class="fa fa-yen fa-2x" aria-hidden="true" style="font-size:large;">
              {{ food.price }}
            </i>
          </el-col>
        </el-row>
      </div>
      <el-divider style="margin: 3% auto;" />
      <div v-for="(p, index) in order.preferential" :key="index">
        <el-row :gutter="3" style="margin: 2px;">
          <el-col :xs="20" style="font-size: small;">
            {{ p.disc }}
          </el-col>
          <el-col :xs="4">
            <i class="fa fa-yen fa-2x" aria-hidden="true" style="font-size:small;">
              {{ p.price }}
            </i>
          </el-col>
        </el-row>
      </div>
      <el-divider style="margin: 3% auto;" />
      <div>
        <p style="text-align: right;margin-bottom: 5px;">
          合计 <span style="font-weight: bold;">¥ {{ order.cost }}</span>
        </p>
      </div>
    </el-card>
  </div>
</template>
<script setup>
import { useRoute } from 'vue-router';
import { defineProps } from 'vue'
const route = useRoute();
const orderId = route.params.orderId;

// defineProps({
//   orderId: String,
//   storeImg: String,
//   storeName: String,
//   foods: Array,
//   orderTime: String,
//   stateDisc: String,
//   state: String,
//   cost: Number,
//   preferential: Array,
// })
const order = {
  orderId: '1',
  state: 'done',
  stateDisc: '已完成',
  storeImg: 'img/newPic/ikun1.png',
  storeName: 'IKun专属店',
  foods: [{ name: 'aaa', img: 'img/newPic/93.jpg', price: 20, number: 1 }, { name: 'aaa', img: 'img/newPic/93.jpg', price: 20, number: 1 }, { name: '炸鲲', img: 'img/dcfl10.png', price: 20, number: 12 }, { name: '炸鲲', img: 'img/dcfl10.png', price: 20, number: 12 }, { name: '炸鲲', img: 'img/dcfl10.png', price: 20, number: 12 }, { name: '炸鲲', img: 'img/dcfl10.png', price: 20, number: 12 }],
  orderTime: new Date().toLocaleString(),
  cost: 66.60,
  preferential: [{ disc: "新用户优惠", price: 2 }, { disc: "老用户优惠", price: 20 }]
};

</script>

<style scoped>
.bg {
  background-image: linear-gradient(to bottom, #409eff, #FFFFFF);
  height: 60%;
  width: 100%;
  position: fixed;

}

.head {
  position: fixed;
  z-index: 100;
  width: 100%;
  height: 20vw;
}

.head p {
  font-size: 150%;
  color: #FFFFFF;
  margin: 5vw;
}

.detail {
  position: relative;
  top: 20vw;
}

.card {
  margin: 7px;
}

.card-more div {
  text-align: center;
  font-weight: 100;
  font-size: x-small;
  margin: auto 5%;
}
</style>